<template>
  <div>
    <BasicTable @register="registerTable" :rowSelection="rowSelection">
      <template #tableTitle>
        <a-button type="primary" preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
        <j-upload-button type="primary" preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
      </template>
      <template #action="{ record }">
        <TableAction :actions="getActions(record)" />
      </template>
      <!-- 展示订单号 -->
      <template #orderNo="{ record }">
        <Row :gutter="[24, 24]" class="order-no">
          <Col :span="4">
            <Tag color="blue">支付</Tag>
          </Col>
          <Col :span="20">
            <Tooltip placement="topLeft">
              <template #title>
                <span>{{ record.payOrderNo }}</span>
              </template>
              <div class="order-no-data">{{ record.payOrderNo }}</div>
            </Tooltip>
          </Col>
        </Row>
        <Row :gutter="[24, 24]">
          <Col :span="4">
            <Tag color="green">商户</Tag>
          </Col>
          <Col :span="20">
            <Tooltip placement="topLeft">
              <template #title>
                <span>{{ record.mchOrderNo }}</span>
              </template>
              <div class="order-no-data">{{ record.mchOrderNo }}</div>
            </Tooltip>
          </Col>
        </Row>
      </template>
    </BasicTable>
    <OrderDetail @register="register" />
    <RefundModal @register="registerRefundModal" @success="reload" />
    <QrCodeModel @register="registerQrCodeModal" @success="reload" :showFooter="false" />
  </div>
</template>
<script lang="ts" name="PayOrderList" setup>
  import { ref, onUnmounted } from "vue"
  import { Tag, Row, Col, Tooltip } from "ant-design-vue"
  import { BasicTable, TableAction } from "/@/components/Table"
  import { useModal } from "/@/components/Modal"
  import { useDrawer } from "/@/components/Drawer"
  import OrderDetail from "./OrderDetail.vue"
  import RefundModal from "./RefundModal.vue"
  import QrCodeModel from "../payDemo/QrCodeModel.vue"
  import { useGlobSetting } from "/@/hooks/setting"
  import { columns, searchFormSchema } from "./order.data"
  import { listPayOrder, closeOrder, continuePay, Url } from "/@/api/pay"
  import { useListPage } from "/@/hooks/system/useListPage"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useUserStore } from "/@/store/modules/user"
  const { createMessage } = useMessage()
  const glob = useGlobSetting()
  const isScanCode = ref(false)
  const timeInter = ref<any>(null)
  const userStore = useUserStore()
  const [register, { openDrawer: openDetail }] = useDrawer()
  const [registerRefundModal, { openModal: openRefundModal }] = useModal()
  const [registerQrCodeModal, { openModal: openQrCodeModal, closeModal: closeQrCodeModal }] = useModal()
  // 列表页面公共参数、方法
  const { prefixCls, onExportXls, onImportXls, tableContext } = useListPage({
    designScope: "PayOrderList",
    tableProps: {
      title: "支付订单列表",
      api: listPayOrder,
      beforeFetch: (params) => {
        params.tenantId = userStore.getSelectTenant.isMainTenant ? userStore.getSelectTenant.id : undefined
      },
      columns: columns,
      bordered: false,
      actionColumn: {
        width: 170,
        title: "操作",
        dataIndex: "action",
        fixed: "right",
        slots: { customRender: "action" },
      },
      formConfig: {
        schemas: searchFormSchema,
        fieldMapToTime: [["fieldTime", ["beginDate", "endDate"], "YYYY-MM-DD"]],
      },
    },
    exportConfig: {
      name: "支付订单",
      url: Url.payOrderExport,
    },
    importConfig: {
      url: Url.payOrderImport,
    },
  })

  const [registerTable, { reload }, { rowSelection, selectedRowKeys }] = tableContext

  /**
   * 查看
   */
  function handleDetail(record) {
    openDetail(true, {
      record,
    })
  }
  /**
   * 操作列定义
   * @param record
   */
  function getActions(record) {
    return [
      {
        label: "查看",
        onClick: handleDetail.bind(null, record),
        // ifShow: record.sendStatus == 0
      },
      {
        label: "退款",
        ifShow: record.status == "2",
        onClick: handleRefund.bind(null, record),
      },
      {
        label: "取消",
        // 只有待支付和支付中订单才可以取消
        ifShow: record.status == "0" || record.status == "1",
        onClick: handleCloseOrder.bind(null, record),
      },
      {
        label: "支付",
        ifShow: record.status == "1",
        onClick: handleContinuePayOrder.bind(null, record),
      },
    ]
  }

  /**
   * 退款
   */
  const handleRefund = async (record) => {
    openRefundModal(true, { record })
  }

  /**
   * 关闭订单
   */
  const handleCloseOrder = async (record) => {
    createMessage.loading({
      content: "取消中...",
      key: "closeOrder",
    })
    try {
      await closeOrder({ payOrderNo: record.payOrderNo, mchNo: record.mchNo, appId: record.appId })
      reload()
      createMessage.success("取消成功")
    } finally {
      createMessage.destroy("closeOrder")
    }
  }

  const handleContinuePayOrder = async (record) => {
    const data = await continuePay({
      mchOrderNo: record.mchOrderNo,
      version: "v1",
      mchNo: record.mchNo,
      appId: record.appId,
    })
    openQrCodeModal(true, {
      wayCode: record.wayCode,
      apiRes: data,
    })
  }
</script>

<style lang="less">
  .order-no {
    margin-bottom: 5px;
  }
  .order-no-data {
    text-align: left;
    border: 1px;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 12px;
    text-overflow: ellipsis;
  }
</style>
